<script setup lang="ts">
import { ref, onMounted } from "vue";
import type { Ref } from "vue";
import { getImage } from "@/api/home";
import { showToast } from "vant";
const value = ref();
// interface iList{
//   imgid:number
//   imgurl:string
//   price:string
//   title:string
//   city:string
// }
interface iImg {
  imgid: number
  price: string
  imgurl: string
  title: string
  city: string

}
const proImage: Ref<iImg[]> = ref([])
// const imageList:Ref<iList[]>= ref([])
// const proList = ref([])
// imageList.value = getImageList()

onMounted(() => {
  // 获取自定义图片数据
  getImage().then(res => {
    // console.log(res);
    proImage.value = res.data.data
    // console.log(proImage.value);


  })

});
// //记录当前滚动距离
// const scrollTopNum:Ref<number> = ref(0)
// function scrollTop(event: any) {
//   // console.log(1111);
//   console.log(event.target.scrollTop);
//   scrollTopNum.value = event.target.scrollTop;
// }
// const content = ref();
// //回到顶部按钮
// function backTop(){
//     content.value.scrollTop = 0;
// }
//点击进入收藏页
function likeBtn() {
  // console.log(666);
  showToast('收藏成功')

}
</script>
<template>
  <div class="box">
    <div class="header">民宿首页</div>
    <!-- 轮播图部分 -->
    <div class="container">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in proImage" :key="item.imgid">
          <img :src="item.imgurl" alt="" />
      </van-swipe-item>
    </van-swipe>
    <!-- 搜索框部分
                         -->
      <!-- <van-search class="search" v-model="value" shape="round" background="#4fc08d" placeholder="请输入搜索关键词"
                    /> -->
    <!-- 宫格布局部分
                             -->

      <van-grid>
        <van-grid-item>
          <van-icon size="30" color="pink" name="location" @click="$router.push('/home/detail2')" />
          <div class="font">附近房源</div>
        </van-grid-item>
        <van-grid-item @click="$router.push('/home/like')">
          <van-icon size="30" color="skyblue" name="like" />
          <div class="font">收藏</div>
        </van-grid-item>
        <van-grid-item @click="$router.push('/home/history')">
          <van-icon size="30" color="blue" name="todo-list" />
          <div class="font">浏览记录</div>
        </van-grid-item>
        <van-grid-item @click="$router.push('/user/master')">
          <van-icon size="30" color="yellow" name="manager" />
          <div class="font">成为房东</div>
        </van-grid-item>
      </van-grid>


      <!-- 标题
                             -->
      <div>
        <h3>热门目的地</h3>
      </div>

      <!-- tab 标签页
                             -->
      <van-tabs>
        <van-tab v-for="item in proImage" :key="item.imgid" :title="item.city">
          <ul class="itemtab">
            <li class="itemLi" @click="$router.push('detail')">
              <div class="itemimage">
                <van-image :src="item.imgurl" />
              </div>
              <div class="content">
                <div class="title">
                  {{ item.title }}
                </div>
                <div class="price">
                  ￥{{ item.price }}
                </div>
              </div>
            </li>
          </ul>
        </van-tab>
        <!-- <van-tab title="标签 2">内容 2</van-tab>
                            <van-tab title="标签 3">内容 3</van-tab>
                            <van-tab title="标签 4">内容 4</van-tab>
                            <van-tab title="标签 4">内容 4</van-tab> -->
      </van-tabs>

      <!-- 房源信息
                             -->
      <div>
        <h3>房源信息</h3>
      </div>

      <div class="proList">
        <ul class="pro">
          <li class="proItem" v-for="item in proImage" :key="item.imgid">
            <div class="itemImage" @click="$router.push('detail2')">
              <van-image :src="item.imgurl"></van-image>
            </div>
            <div class="itemInfo">
              <div class="itemTitle">
                {{ item.title }}
              </div>
              <div class="itemPrice">
                {{ item.price }}
              </div>
              <div class="like" @click="likeBtn">
                <van-button type="primary">收藏</van-button>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="backTop">
        <van-icon name="back-top" size="30" />
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.header {
  height: 44px;
  background-color: white;
  line-height: 44px;
  text-align: center;
  color: black;
  font-size: 16px;
}

.van-swipe {
  position: relative;
}

.van-swipe-item img {
  width: 100%;
  height: 300px;
}

.van-grid-item {
  cursor: pointer;
}

.itemtab {
  display: flex;
  overflow: hidden;
}

.itemLi {
  width: 50%;
  margin: 3px 1%;
  margin-left: 20px;
  // border: 1px solid #f66;
  box-sizing: border-box;
}

.itemimage {
  margin-top: 10px;
  margin-left: 10px;
}

.itemimage .van-image {
  margin-left: 7px;
  width: 300px;
}

.content {
  // border: 1px solid #666;
  margin-top: 10px;
}

.content .title {
  margin-left: 80px;
  font-size: 14px;
  color: orange;
}

.content .price {
  margin-left: 80px;
  font-size: 18px;
  margin-top: 15px;
  color: skyblue;
}

.font {
  font-size: 12px;
  margin-top: 10px;
}

.van-image {
  width: 150px;
  height: 150px;
  //   margin: 15px 15px 0 15px;
}

.pro {
  display: flex;
  flex-wrap: wrap;
}

.proItem {
  width: 48%;
  margin-left: 15px;
  margin: 3px 1%;
  // border: 1px solid skyblue;
  box-sizing: border-box;
}

.itemImage {
  width: 100%;
  height: 200px;
}

.proItem .van-image {
  width: 100%;
  height: 100%;
}

.itemInfo {
  line-height: 22px;
  padding: 5px 10px;
  box-sizing: border-box;
}

.itemTitle {
  font-size: 16px;
  color: skyblue;
}

.itemPrice {
  font-size: 14px;
  color: orange;
}

.like {
  width: 100px;
  height: 20px;
  margin-left: 35px;
  // margin-bottom: 10px;
}

.backTop {
  position: fixed;
  width: 36px;
  height: 36px;
  right: 15px;
  bottom: 110px;
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid skyblue;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
